<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>倒计时</title>
	<style type="text/css">
body{
	font-family: '微软雅黑';
	background-image: url(time.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}
*{
	margin: 0;
	padding: 0;
}
.container
{
	height: 300px;
	width: 300px;
	margin: 88px auto;
	border: 1px dashed #fff;
	text-align: center;
	border-radius: 88px;
}
h1{
	margin:20px 0;
	color: #fff;
}
#showTime{
    font-size: 8em;
    color: #fff;
}
</style>
</head>
<body>
	<div class="container">
		<h1>倒计时</h1>
		<p id="showTime">60</p>
	</div>
</body>
<script type="text/javascript">
	window.onload=function(){
		var showTime = document.getElementById('showTime');
		var timer = 60;
		var interval = null;
		interval = setInterval(function(){
			timer--;
			showTime.innerHTML = timer;
			// document.write(timer);
			// console.log(timer);
			if(timer < 1){
			// clearInterval(interval);
			timer = 60;
			}
		},1000);

	}
</script>
</html>